<template>
  <div class="todoapp">
    <!-- 使用局部组件 -->
    <TodoHeader @addTask="addTaskHandler"></TodoHeader>
    <TodoMain @delTask="delTaskHandler" :list="newList"></TodoMain>
    <TodoFooter @toggleTask="toggleTaskHandler" :list="newList"></TodoFooter>
  </div>
</template>

<script>
    /*
      需求1：数据渲染：将父组件中的数据渲染至main-->父向子传值
        1.1 在main组件的props中定义好接收来自父组件数据的变量
        1.2 在main中需要使用父组件元素数据的位置替换为props中定义的变量
        1.3 通过v-for在main中循环数据渲染页面

      需求2：添加：在header组件中按下回车,将用户输入的数据传递给父组件并以此生成对象添加至list-->子向父传值
        2.1 在父组件中给footer子组件的占位标签绑定自定义事件-->事件处理函数在父组件methods中定义
        2.2 给header子组件的input框双向绑定数据变量和键盘enter按下事件
        2.3 在header键盘按下事件处理函数中,触发父组件的自定义事件,将input绑定的数据变量传递出去
        2.4 父组件的自定义事件处理函数执行,形参接收传递的数据,生成对象向list中添加数据-->arr.push

      需求3：删除：点击main中的删除按钮,将当前对应数据的id通过父组件自定义事件传递出去,父组件通过id删除list对应数据
        3.1 main删除按钮绑定点击事件-->触发父组件自定义事件传参(id)
        3.2 父组件接收id参数-->遍历数组找出对应数据删除

      需求4：计算剩余值：父向子footer传值,将list的长度显示到对应位置
        4.1 footer组件的props中定义变量接收父元素传递的值-->引用数据类型数组
        4.2 将接收数组的长度显示到页面

      需求5： footer组件的tab栏切换
        5.1 给footer组件中每个点击的按钮绑定点击事件和动态类名-->动态类名的添加根据每个按钮的状态值字符串和数据变量的比对决定
        5.2 按钮的点击事件触发时,将当前点击按钮的状态值赋值给数据变量-->比对成功的按钮才有该类

      需求6： main中展示的数据根据footer中点击按钮的状态决定
        6.1 footer按钮点击时,将按钮的状态值传递给父组件-->事件委托给ul-->将data中存储的数据变量传递出去
        6.2 父组件给footer绑定自定义事件,事件触发时接收footer按钮的状态变量
        6.3 将状态变量赋值给伪全局变量data中-->给计算属性过滤数组用
        6.4 在父组件的computed中定义一个计算属性,通过data中的状态值变量过滤数组生成对应新数组
        6.5 将返回的新数组作为main组件渲染页面的数据依赖替换掉原来的list-->同理footer也是
    */ 

// 引入局部组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  data(){
    return {
      isSel:'all',
      list: [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ]
    }
  },
  methods:{
    addTaskHandler(taskName){
      console.log('111')
      this.list.push({
        id:this.list.length>0?this.list[this.list.length-1].id+1:100,
        name:taskName,
        isDone:false
      })
    },
    delTaskHandler(id){
      console.log(id)
      this.list=this.list.filter(item=>item.id!==id)
    },
    toggleTaskHandler(isSel){
      this.isSel=isSel
    }
  },
  computed:{
    newList(){
      if(this.isSel=='yes'){
        return this.list.filter(item=>item.isDone)
      }else if(this.isSel=='no'){
        return this.list.filter(item=>!item.isDone)
      }else{
        return this.list
      }
    }
  },
 components:{
  //  注册局部组件
    TodoHeader,
    TodoMain,
    TodoFooter
 }
}
</script>

<style lang="scss" scoped>

</style>